body{
    background-color: #C0DEED;
    background-image:url('res/background.png');
    background-repeat:repeat;
}

#Memo{
    height:100%;
    width:68%;
    float:right;
    font-family:arial;
    font-size:small;
}

#Naut{
    height:98%;
    width:30%;
    float:left;
    left:2%; /* remember to change this too, if changing float*/
    font-family:arial;
    font-size:small;
    overflow:auto;
    position:fixed;
}

#MindMap {
    overflow:auto;
    font-family:arial;
    width:85%;
    background-color:beige;
    float:left;
    margin-left:6%;
}

#Notebook{
}

#Scrapbook{
    margin-right:5%;
}

#Toolbar{
    width:95%;
    height:auto;
    float:left;
    margin-bottom:2%;
}

#Naut ol{
    list-style-type:none;
}

#NotePod{
    height:auto; /* Cannot do this for dynamic content*/
    width:95%;
    overflow:auto;
    background-color:beige;
    float:left;
    border-bottom:thin groove silver;
}

#Bookmarks{
    clear:both;
    float:left;
    height:20%;
    width:95%;
    overflow:auto;
    background-color:beige;
    border-bottom:thin groove silver;
}

#Notebooks{
    clear:both;
    float:left;
    height:20%;
    width:95%;
    overflow:auto;
    background-color:beige;
    border-bottom:thin groove silver;
}

#DocumentInfo{
    float:left;
    width:95%;
    height:auto;
    float:left;
    overflow:hidden;
    background-color:beige;
    border-bottom:thin groove silver;
}

#Status{
    clear:both;
    float:left;
    font-family:tahoma;
    background-color:beige;
    width:95%;
    border-bottom:thin groove silver;
}

#textareaScrap{
    margin-top:2%;
    margin-left:2%;
}

#barNavigator{
    float:left;
}

#barQuickActions{
    clear:both;
    float:right;
}

#Help {
    position: fixed;
    clear: both;
    float: left;
    color: black;
    background-color: beige;
    font-size: small;
    width: 35%;
    bottom: 0px;
    height:40%;
    right:0px;
    border-color:silver;
    border-style:groove;
    border-width:thin;
}

#contentHelp{
    height:99%;
    width:100%;
}

#undeleter{
    font-size:x-small;
    color:blue;
    float:right;
    cursor:pointer;
}

#Notebook li{
/*	border-style:groove;
	border-color:lightgrey;
	border-width:thin;
*/}

#Notebook ol {
    overflow:visible;
    font-family:arial;
    list-style-type:none;
    margin-bottom:1%;
}

#Notebook ol li {
    /*margin-bottom:1%;*/
    background-color:beige;
}

.adder{
    height:0.5em;
    width:100%;
    float:right;
    clear:both;
    margin-right:1%;
}

.adder:hover{
    outline: thin groove black;
    background-color:silver /* silver or olive or orange?*/
}

#Notebook ol.numbering.decimal{
    list-style-type:decimal;
}

#Notebook ol.numbering.loweralpha{
  list-style-type:lower-alpha;
}

#Notebook ol.numbering.upperalpha{
  list-style-type:upper-alpha;
}

#Notebook ol.numbering.lowerroman{
  list-style-type:lower-roman;
}

#Notebook ol.numbering.upperroman{
  list-style-type:upper-roman;
}

#Notebook ol li .scrap {
    display:inline;
}

#Notebook ol li .info{
    font-family:Arial;
    color:blue;
    font-size:x-small;
}

#Notebook ol li .content{
    margin-left:1%;
    display:inline;
}

#Notebook ol li:hover .controls{
    cursor:pointer;
    visibility:visible;
}

.current{
    background-color:aliceblue;
}

.baractions{
    width:99%;
    border-style:groove;
    border-color:silver;
    border-width:thin;
}

.actions{
    font-size:x-small;
    color:blue;
    cursor:pointer;
    float:right;
    border-style:groove;
    border-color:silver;
    border-width:thin;
}

.controls{
    margin-left:1%;
    margin-right:1%;
    visibility:hidden;
}

/* For IE: Otherwise dynamically added icons, smaller*/
.iconactions {
    width:16px;
    height:16px;
}

.foldindicator {
    width:16px;
    height:16px;
}

.clicker{
    width:16px;
    height:16px;
    cursor:default;
}

.eip:hover{
    background-color:aliceblue;
}

.areatitle{
    cursor:default;
}

.clipboard{
    border-style:dashed;
    border-color:gray;
    border-width:thin;
}

.selection{
    outline-style:dotted;
    outline-color:gray;
    outline-width:thin;
}

.strikethrough{
    text-decoration:line-through;
}

.underline{
    text-decoration:underline;
}

/* FONT-SIZES Default is small*/

.large{
    font-size:large;
}

.xlarge{
    font-size:x-large;
}

.xxlarge{
    font-size:xx-large;
}

.xsmall{
    font-size:x-small;
}

.xxsmall{
    font-size:xx-small;
}

/* ********** */
/* PROTO protomenu */

/* GENERAL STYLES */

div.protomenu {
    position: absolute;
    top: 0;
    left: 0;
    font-family: verdana;
}

div.protomenu a {
    display: block;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    font-size: x-small;
}
.protomenu .separator {
    height: 1px;
    padding: 0;
    overflow: hidden;
    display: block;
    font-size: 1px;
}
.protomenu ul, .protomenu li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.protomenu li {
    list-style-position: outside;
}

/* FIREFOX STYLES */

.protomenu.firefox {
    width: 12em;
    background: #F4F5EB;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 2px 0;
}
.protomenu.firefox a {
    color: black;
    padding: 4px 15px;
    margin: 0 2px;
}

.protomenu.firefox a:hover {
    background: #006;
    color: #fff;
}
.protomenu.firefox a.disabled {
    color: #bbb;
}
.protomenu.firefox a.disabled:hover {
    background: #F4F5EB;
    color: #bbb;
}
.protomenu.firefox .separator {
    border-bottom: 1px solid #fff;
    background: #999;
    margin: 2px 4px;
}

.red{
    color:red;
}

.green{
    color:green;
}

.blue{
    color:blue;
}

.bold{
    font-weight:bold;
}

.italic{
    font-style:italic;
}


